<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>

    <meta charset="utf-8">

    <title>以计算机科学与技术专业为例的学生学习过程分析系统</title>
    <!--引入相关的js文件-->
    <link href="../backPage/ui/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="../backPage/ui/bootstrap-table-1.11.0/bootstrap-table.min.css" rel="stylesheet"/>
    <link href="../backPage/ui/waves-0.7.5/waves.css" rel="stylesheet"/>
    <link href="../backPage/ui/jquery-confirm/jquery-confirm.min.css" rel="stylesheet"/>
    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="../backPage/ui/css/graghic.css" rel="stylesheet"/>
    <script src="../backPage/ui/js/jquery-3.3.1.min.js"></script>
    <script src="../backPage/ui/waves-0.7.5/waves.js"></script>
    <script src="../backPage/ui/jquery-confirm/jquery-confirm.min.js"></script>
    <script src="../backPage/ui/bootstrap-3.3.0/js/bootstrap.min.js"></script>
    <script src="../backPage/ui/bootstrap-table-1.11.0/bootstrap-table.min.js"></script>
    <script src="../backPage/ui/js/echarts.js"></script>
</head>

<body>
<!--prepare a DOM with size for ECharts-->
    <div class="container-fluid">
        <div id="AllTheStudentArrivedRateInfo" class="pull-left col-md-6 col-xs-12 graghic" style="height: 450px;"></div>
        <div id="AllStudentDistributeInfo" class="pull-right col-md-6 col-xs-12 graghic" style="height: 450px;"></div>
        <div id="AllCourseDistrubuteInfo" class="pull-left col-md-6 col-xs-12 graghic" style="height:450px;"></div>
        <form class="col-md-6">
            <label for="classId">请选择班级名称</label>
            <select class="form-control" id="classId" name="classId"></select>
        </form>
        <div id="AllClassStudentArrivedInfo" class="pull-right col-md-6 col-xs-12 graghic" style="height:450px;"></div>
        <div id="AllClassArriveInfo" class="pull-left col-md-6 col-xs-12 graghic" style="height:450px;"></div>

        <div id="AllRuntimeStudentArriveCount" class="pull-right col-md-6 col-xs-12 graghic" style="height:450px;"></div>
    </div>
      
      
    <script type="text/javascript">
        $(function(){
            initAllTheStudentArrivedRateInfo();
            initAllStudentDistributeInfo();
            initAllCourseDistrubuteInfo();
            $.ajax({
               url:"/util/getClassInfos",
               type:"post",
               success:function(data){
                   for(var i = 0;i<data.length;i++){
                       $("#classId").append("<option value="+data[i]['id']+">"+data[i]['classname']+"</option>")
                   }
                   cid = $('#classId option:first').prop('selected', 'selected').val();
                   initAllClassStudentArrivedInfo(cid);
               }
            });
            $("#classId").change(function(){
                var cid = $("#classId option:selected").val();
                initAllClassStudentArrivedInfo(cid);
            });
            initAllClassArriveInfo();
            intervalId = setInterval(function () {
                initAllRuntimeStudentArriveCount();
            }, 5000);
        });

        function initAllTheStudentArrivedRateInfo() {
            $.ajax({
                url:"/studentManageSystem/getAllStudentArrivedRate",
                type:"post",
                success:function(data){
                    var arrivedRate = parseFloat(data);
                    //基于准备好的dom，初始化echarts实例
                    var myChart=echarts.init(document.getElementById('AllTheStudentArrivedRateInfo'));
                    //指定图表的配置项和数据
                    option = {
                        title : {
                            text: '计算机类学生整体到课率',
                            x:'center'
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: ['到课率','未到课率'],
                            "textStyle": {
                                "fontSize": 24
                            }
                        },
                        series : [
                            {
                                name: '到课率',
                                type: 'pie',
                                radius : '55%',
                                center: ['50%', '60%'],
                                data:[
                                    {value:arrivedRate, name:'到课率'},
                                    {value:100-arrivedRate, name:'未到课率'}
                                ],
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 1)'
                                    }
                                }
                            }
                        ]
                    };
                    //使用刚指定的配置项和数据显示图表
                    myChart.setOption(option);
                }
            });

        }

        function initAllStudentDistributeInfo(){
            var myChart=echarts.init(document.getElementById('AllStudentDistributeInfo'));
            $.ajax({
                url:"/studentManageSystem/AllStudentDistributeInfo",
                type:"post",
                success:function(data){
                    option = {
                        title: {
                            text: '班级学生分布情况',
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            data: ['学生人数']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01]
                        },
                        yAxis: {
                            type: 'category',
                            data: eval(data[0])
                        },
                        series: [
                            {
                                name: '学生人数',
                                type: 'bar',
                                data: eval(data[1])
                            }
                        ]
                    };
                    myChart.setOption(option);
                }
            })
        }

        function initAllCourseDistrubuteInfo(){
            var myChart=echarts.init(document.getElementById('AllCourseDistrubuteInfo'));
            $.ajax({
                url:"/studentManageSystem/AllCourseDistrubuteInfo",
                type:"post",
                success:function(data){
                    option = {
                        title: {
                            text: '课程类型分布情况',
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            data: ['课程数目']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01]
                        },
                        yAxis: {
                            type: 'category',
                            data: eval(data[0])
                        },
                        series: [
                            {
                                name: '课程数目',
                                type: 'bar',
                                data: eval(data[1])
                            }
                        ]
                    };
                    myChart.setOption(option);
                }
            });
        }

        function initAllClassStudentArrivedInfo(cid){
            var myChart=echarts.init(document.getElementById('AllClassStudentArrivedInfo'));
            $.ajax({
                url:"/studentManageSystem/getAllClassStudentArrivedInfo/"+cid,
                type:"post",
                success:function(data){
                    option = {
                        title: {
                            text: '班级学生到课率'
                        },
                        tooltip: {},
                        legend: {
                            data: ['学生实际到课率']
                        },
                        radar: {
                            // shape: 'circle',
                            name: {
                                textStyle: {
                                    color: '#fff',
                                    backgroundColor: '#999',
                                    borderRadius: 3,
                                    padding: [3, 5]
                                }
                            },
                            indicator: eval(data[0])
                        },
                        series: [{
                            name: '到课率',
                            type: 'radar',
                            // areaStyle: {normal: {}},
                            data : [
                                {
                                    value : eval(data[1]),
                                    name : '学生实际到课率'
                                }
                            ]
                        }]
                    };
                    myChart.setOption(option);
                }
            });
        }

        function initAllClassArriveInfo(){
            var myChart=echarts.init(document.getElementById('AllClassArriveInfo'));
            $.ajax({
                url:"/studentManageSystem/getinitAllClassArriveInfo",
                type:"post",
                success:function(data){
                    option = {
                        title: {
                            text: '班级平均到课率'
                        },
                        tooltip: {},
                        legend: {
                            data: ['班级平均到课率']
                        },
                        radar: {
                            // shape: 'circle',
                            name: {
                                textStyle: {
                                    color: '#fff',
                                    backgroundColor: '#999',
                                    borderRadius: 3,
                                    padding: [3, 5]
                                }
                            },
                            indicator: eval(data[0])
                        },
                        series: [{
                            name: '班级平均到课率',
                            type: 'radar',
                            // areaStyle: {normal: {}},
                            data : [
                                {
                                    value : eval(data[1]),
                                    name : '班级平均到课率'
                                }
                            ]
                        }]
                    };
                    myChart.setOption(option);
                }
            });
        }

        function initAllRuntimeStudentArriveCount(){
            var myChart=echarts.init(document.getElementById('AllRuntimeStudentArriveCount'));
            $.ajax({
                url:"/studentManageSystem/getAllRuntimeStudentArriveCount",
                type:"post",
                success:function(data) {
                    var option = {
                        dataset: {
                            source: eval(data)
                        },
                        grid: {containLabel: true},
                        xAxis: {name: '实际人数'},
                        yAxis: {type: 'category'},
                        visualMap: {
                            orient: 'horizontal',
                            left: 'center',
                            min: 10,
                            max: 160,
                            text: ['High', 'Low'],
                            // Map the score column to color
                            dimension: 0,
                            inRange: {
                                color: ['#D7DA8B', '#E15457']
                            }
                        },
                        series: [
                            {
                                type: 'bar',
                                encode: {
                                    x: '实际人数',
                                    y: '课程名称'
                                }
                            }
                        ]
                    };
                    myChart.setOption(option);
                }
            });
        }
</script>
</body>
</html>